<template>
    <p>插值</p>
    <p>a: {{ a }}</p>
    <div v-html="spanHtml"></div>

    <p>v-bind</p>
    <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
    <img v-bind:src="imgUrl" >
    <img :src="imgUrl" />

    <p>v-on</p>
    <el-button type="primary" @click="addOne">Primary</el-button>

    <p>v-if</p>
    <p v-if="isOk"> v-if -isOk- true</p>
    <p v-else>v-if -isOk- false</p>
    <p v-show="isOk"> v-show -isOk- true</p>

    <el-button type="primary" @click="switchIsOk">切换</el-button>

    <p v-if="count == 1">1</p>
    <p v-else-if="count == 2">2</p>
    <p v-else>3</p>

    <el-button type="primary" @click="changeCount(1)">1</el-button>
    <el-button type="primary" @click="changeCount(2)">2</el-button>
    <el-button type="primary" @click="changeCount(3)">3</el-button>

    <p>v-for</p>
    <p v-for="item in  todosArr">{{ item }}</p>

    <p v-for="(value, key, index) in todosObj">{{ key }}-{{ value }}-{{ index }}</p>

    <input type="text" v-model.number="input">
    <button @click="printInput">printInput</button>
    
</template>

<script setup>
import {ref} from 'vue'
const a = ref(0)

const spanHtml = ref('<span>这是一个span标签</span>')

const imgUrl = ref('//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

const isOk = ref('true')

const count = ref(1)

const todosArr = ref([
    '起床',
    '打扫卫生',
    '看电视剧',
    '吃饭',
    '睡觉'
])

const todosObj = ref({
    '8':'起床',
    '9':'打扫卫生',
    '10':'看电视剧',
    '11':'吃饭',
    '12':'睡觉',
})

const input = ref(0)


const addOne = ()=>{
    a.value++
}

const switchIsOk = ()=>{
    isOk.value = !isOk.value
}

const changeCount = (num)=>{
    count.value = num
}

const printInput = ()=>{
    console.log(input.value)
}
</script>